// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'


import HelloCls from './component/HelloCla'

// 引入css文件
import "./index.css"
//  React 事件处理


// React时间绑定语法与DOM事件语法相似
// 语法 on+事件名称={事件处理程序}  onClick={()=>{}}
// 注意: React事件  采用驼峰命名法

// class App extends React.Component{

//     // 事件 处理程序
//     handlerClick(){
//         alert('这是单击处理程序')
//     }
//     render(){
//         return (
//             <button onClick={this.handlerClick}>点我</button>
//         )
//     }
// }
// 基于函数组件绑定事件
// function App(){
//     function handlerClick(){
//         alert('这是单击处理程序')
//     }
//     return (
//         <button onClick={handlerClick} >点我</button>
//     )
// }

// 事件对象的使用

//可以通过事件处理程序的参数获取事件对象
//React中的事件对象叫做:合成事件(对象) 
//合成事件: 兼容所有浏览器 无需担心浏览器兼容性问题
function App(){
    function handlerClick(e){
        e.preventDefault();
        //阻止浏览器 默认行为
        alert('这是单击处理程序')
    }
    return (
        <a href="http://wwww.baidu.com" onClick={handlerClick} >点我</a>
    )
}


//3 渲染react元素
ReactDOM.render(<App />, document.getElementById('root'))
